<template>
  <table class="his-bottom-table-table">
    <thead class="his-bottom-table-thead">
      <tr class="bottom-table-thead-tr">
        <th>{{theadDataVar.time}}</th>
        <th>{{theadDataVar.periods}}</th>
        <th class="thead-tr-choose-th">
          <span class="choose-th-content" v-for="(item,index) in theadDataVar.opration" :key="index" :class="{active:item.status}" @click="changeChooseTd(index)">{{item.text}}</span>
        </th>
        <th class="thead-tr-zonghe-th">{{theadDataVar.total}}</th>
        <th class="table-thead-tr-th-five">{{theadDataVar.longhu}}</th>
      </tr>
    </thead>
    <tbody class="his-bottom-table-tbody">
      <tr class="bottom-table-tbody-tr" v-for="(item,index) in tbodyDataVar" :key="index">
        <td class="table-tbody-tr-col-one">{{item.time}}</td>
        <td class="table-tbody-tr-col-two">{{item.periods}}</td>
        <td class="table-tbody-tr-col-three">
          <span class="choose-tbody-td-content" v-for="(contentItem,contentIndex) in item.opration[chooseIndex]" :class="{text:changeTextBgc(contentItem.number),specialBg:changeSpecialBgc(contentItem.number), numbergraycolor:ClickedNumShowGrayFun(contentItem.number),textgraycolor:ClickedBigSmallShowGrayFun(contentItem.number),duizihaograycolor:ClickedDuiZiHaoFun(contentItem)}">{{contentItem.number}}</span>
        </td>
        <td class="table-tbody-tr-col-four">
          <span class="zonghe-tbody-td-content" v-for="(item,index) in item.total" :key="index">{{item}}</span>
        </td>
        <td>{{item.longhu}}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import clickedNumIndex from "../../../common/cpdt/clickedNumIndex.js";
import bigsmallData from "../../../common/cpdt/bigsmallData.js";
export default {
  props: {
    hisBottomTableTotalData: null,
    clickedNumIndex: Array,
    clickedCancelAll: Boolean,
    clickBigSmall: Array
  },
  data() {
    return {
      theadDataVar: {},
      tbodyDataVar: [],
      chooseIndex: 0,
      text: null,
      bigSmallDataVar: "",
      isShowDuiZiHaoColor: false,
      isDuizihao: false,
    };
  },
  watch: {
    hisBottomTableTotalData() {
      this.theadDataVar = this.hisBottomTableTotalData.table_head;
      this.tbodyDataVar = this.hisBottomTableTotalData.content;
    },
    clickedNumIndex() {
      // this.delDom('duizihaograycolor')
      // this.isDuizihao = false;
      // if(this.clickedNumIndex.length > 0){
      //   if(this.bigSmallDataVar==''){
      //     return;
      //   }else{
      //      this.bigSmallDataVar.splice(0);
      //   }
      //   this.theadDataVar.opration.forEach((el, i) => {
      //     if (i == 0) {
      //       el.status = 1;
      //     } else {
      //       el.status = 0;
      //     }
      //   });
      //   this.chooseIndex = 0;
      // }
      clickedNumIndex(this)
    },
    clickedCancelAll() {
      if (this.clickedCancelAll) {
        this.theadDataVar.opration.forEach((el, i) => {
          if (i == 0) {
            el.status = 1;
          } else {
            el.status = 0;
          }
        });
        this.chooseIndex = 0;
        this.clickedNumIndex.splice(0);
        // this.bigSmallDataVar.splice(0);
        // this.ClickedNumShowGrayFun();
        // this.ClickedBigSmallShowGrayFun();
        // this.ClickedDuiZiHaoFun();
      }
    },
    // isDuizihao(e) {
    //   this.clickedNumIndex.splice(0);
    //   this.bigSmallDataVar.splice(0);
    // },
    clickBigSmall() {
      this.bigSmallDataVar = this.clickBigSmall;
    },
    bigSmallDataVar() {
      bigsmallData(this);
    }
    
  },
  methods: {
    delDom(className) {
      const doms = document.querySelectorAll("." + className);
      Array.from(doms).forEach(dom => {
        dom.classList.remove(className);
      });
    },
    changeChooseTd(index) {
      this.theadDataVar.opration.forEach((element, i) => {
        if (index == i) {
          element.status = 1;
          this.chooseIndex = i;
        } else {
          element.status = 0;
          this.isChooseContentText = false;
        }
      });
    },

    changeTextBgc(text) {
      if (Number.isInteger(Number(text))) {
        return false;
      } else {
        return true;
      }
    },

    changeSpecialBgc(text) {
      if (!Number.isInteger(Number(text))) {
        switch (text) {
          case "大":
            return true;
          case "小":
            return false;
          case "单":
            return false;
          case "双":
            return true;
          default:
            return false;
        }
      }
    },
    ClickedNumShowGrayFun(text) {
      if(this.$store.state.lotteryType == 'l11x5'){
        if (this.clickedNumIndex.length === 0) {
          return false;
        } else {
          return this.clickedNumIndex.indexOf(text) > -1 ? false : true;
        }
      }else{
        if (this.clickedNumIndex.length === 0) {
          return false;
        } else {
          return this.clickedNumIndex.indexOf(Number(text)) > -1 ? false : true;
        }
      }
      
    },
    ClickedBigSmallShowGrayFun(text) {
      if (this.bigSmallDataVar.length == 0) {
        return false;
      } else if (
        this.bigSmallDataVar[0] !== text &&
        !Number.isInteger(Number(text)) &&
        this.bigSmallDataVar[0] !== "对子号"
      ) {
        return true;
      }
      // else if(this.bigSmallDataVar == "对子号"){
      //   return false
      // }
    },
    ClickedDuiZiHaoFun(item) {
      if (!item) return false;
      if (this.bigSmallDataVar[0] == "对子号") {
        if (item.status == 0) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    }
  }
};
</script>

<style lang="less">
@import url(../../../assets/css/hispagebottomtable.less);
</style>


